<template>
	<div class="cate-tab1 swiper" >
		<ol class="swiper-wrapper">
			<!-- 计算属性的返回结果[重组的数组]，丢给循环操作 -->
			<li v-for="(list,index) in pages" :key="index" class="swiper-slide">
				<router-link to="/" v-for="item in list" :key="item.id">
					<img :src="item.imgURL"/>
					<aside>
						<h3>{{item.title}}</h3>
						<label>{{item.msg}}</label>
						<p>￥{{item.price}}起<em>{{item.oldprice}}</em></p>
					</aside>
				</router-link>
			</li>
		</ol>
	</div>
	
</template>

<script>
	// 2引入swiper的动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
	} from 'swiper';
	// 3swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube]);
	export default{
		name:'CategoryTab1',
		data(){
			return{
				tab1List : [],
			}
		},
		created(){
			let that = this;
			this.axios.get('/api/dataHome.json').then((res)=>{
				
				that.tab1List = res.data.Homemsg[0].CategoryList.CategoryTab1_List;
				
				
			} ).catch( (error)=>{
				
				console.log(error)
			} )
		},
		computed:{
			
			//程序将其当成是属性不是函数，是个变量[循环/判断]
			pages(){
				let arr=[];//空数组，目的是：重组一个二维数组
				let num =4  //每页条数
				//将原数组便历
				this.tab1List.forEach((item,index)=>{
					//每页的页码
					let i=Math.floor(index/num);
					//将计算的页码放入新数组内，作为下标：
					//判断改下标是否已存在
					if(!arr[i]){
						arr[i]=[];
						arr[i].push(item);
						
					}else{
						//已经出现过直接添加
						arr[i].push(item);
					}
					
					// if(!arr[i])    arr[i]=[];
					// arr[i].push(item);
				})
				return arr;
			}
		},
		updated(){
			new Swiper('.cate-tab1',{
				
			})
		}

		

	}
	
</script>

<style scoped>
	.cate-tab1{
		width: 100%;
		height: 10.3rem;
	}
	.cate-tab1 li{
		width: 100%;
	
	}
	.cate-tab1 a{
		text-align: center;
		float: left;
		width: 50%;
		height: 48%;
		text-decoration: none;
		color: black;
		line-height: 0.5rem;
		
	}
	
	.cate-tab1 a img{
		margin-top: 0.5rem;
		width: 90%;
		border-radius: 0.3rem;
	}
	
	.cate-tab1 a h3{
		width: 100%;
		text-indent: 0.2rem;
		text-align: left;
		font-size: 0.3rem;
		font-weight: bolder;	
	}
	.cate-tab1 a label{
		display: block;
		text-align: left;
		text-indent: 0.2rem;
		color: gray;
		display: -webkit-box;
		-webkit-line-clamp: 1;/* 跟高度有关 */
		/* 超出盒子外的文本用省略号代替*/
		-webkit-box-orient: vertical;
		overflow: hidden;
		
	}
	.cate-tab1 a p{
		text-align: left;
		text-indent: 0.2rem;
		color: #ff9134;
		font-size: 0.4rem;
	}
	
	.cate-tab1 a p em{
		margin-left: 0.2rem;
		color: #808080;
		font-size: 0.2rem;
		text-decoration: line-through;
	}
	.cate-tab1-bottom{
		font-size: 3rem;
	}
</style>
